<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/vue2.min.js"></script>
<!--    <script type="text/javascript" src="js/bootstrap.min.js"></script>-->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div  id="mydiv">
    <table id="mytab" class="table table-striped table-hover" style="text-align: center" width="80%">
        <tr>
            <td>用户ID</td>
            <td>用户名</td>
            <td>用户密码</td>
            <td>用户年龄</td>
            <td>用户地址</td>
            <td>联系方式</td>
            <td>操作</td>
        </tr>
        <tr v-for="user in users" >
            <td>{{user.uid}}</td>
            <td>{{user.username}}</td>
            <td>{{user.password}}</td>
            <td>{{user.age}}</td>
            <td>{{user.addr}}</td>
            <td>{{user.tel}}</td>
            <td><button @click="deleteU(user.uid)">删除</button><button @click="updateU(user.uid)">修改</button></td>
        </tr>

    </table>
</div>
<script>
    var test= new Vue({
        el:'#mytab',
        data:{
            users:[]
        },
        methods:{
            deleteU:function(uid){
                $.ajax({
                    type:'DELETE',
                    url:'deleU?uid='+uid,
                    dataType:'json',
                    success:function(data){
                        var abc = test.users;
                        if(data ==1){
                            for(var i =0;i<abc.length;i++){
                                if(abc[i].uid==uid){
                                    abc.splice(i,1);
                                    break;
                                }
                            }
                        }
                    }

                })
            }
        }
    });

    $(function () {
        getAll();
    })
    function getAll() {
        $.ajax({
            type:'GET',
            url:'/users',
            dataType:'json',
            success:function(aaa){
                test.users=aaa;
            }
        })
    }

</script>
</body>
</html>